<template>
	<view class="editUser-page">
		<ul v-if="user">
			<li class="avatar" @click="uploadAvatar">
				<div class="left">
					<span>头像</span>
				</div>
				<div class="avatar-wrap">
					<image :src="user.header" mode=""></image>
				</div>
			</li>
			<li>
				<div class="left">
					<span>企业名称</span>
					<input type="text" v-model="user.company" placeholder="请输入公司名称">
				</div>
				<image src="../../../static/image/arrow.png" mode=""></image>

			</li>
			<picker @change="bindPickerChange" mode="region" :range="array">
				<li>
					<div class="left">
						<span>企业地址</span>
						<input type="text" disabled v-model="handleProvince" :placeholder="handleProvince ? '' : '请选择企业地址'">
					</div>
					<image src="../../../static/image/arrow.png" mode=""></image>
				</li>
			</picker>
			<picker @change="(e) => bindChange(e,'scaleIndex','scale','isScale')" range-key="name" :range="scaleList">
				<li>
					<div class="left">
						<span>企业规模</span>
						<p v-if="isScale">{{ handleScale }}</p>
						<input type="text" disabled v-else placeholder="请输入企业规模">
					</div>
					<image src="../../../static/image/arrow.png" mode=""></image>
				</li>
			</picker>

			<picker @change="(e) => bindChange(e,'companycateIndex','company_cate','isCompanyCate')" range-key="name"
				:range="company_cateList">
				<li>
					<div class="left">
						<span>所属行业</span>
						<p v-if="isCompanyCate">{{ handleCompanycate }}</p>
						<input type="text" disabled v-else placeholder="请输入所属行业">
					</div>
					<image src="../../../static/image/arrow.png" mode=""></image>
				</li>
			</picker>
			<li @click="goSkill">
				<div class="left" >
					<span>福利待遇</span>
					<div class="tags">
						<span v-for="(item,index) in tagListed" :key="index">{{item.name}}</span>
					</div>
				</div>
				<image src="../../../static/image/arrow.png" mode=""></image>
			</li>
	<!-- 		<picker @change="bindChangeTag" range-key="name" :range="tagList">
				<li>
					<div class="left">
						<span>福利待遇</span>
						<div class="tags">
							<span v-for="(item,index) in tagListed" :key="index">{{item.name}}</span>
						</div>
					</div>
					<image src="../../../static/image/arrow.png" mode=""></image>
				</li>
			</picker> -->
		</ul>
		<SSButton title="保存" @click="save" />


	</view>
</template>

<script>
	import SSButton from '@/components/Button.vue'
	import globalConfig from '@/config/index.js'
	import {
		validPhone
	} from '@/utils/index.js'
	export default {
		components: {
			SSButton
		},
		data() {
			return {
				user: null,
				area: null, // 城市

				scaleList: [],
				scaleIndex: 0,

				company_cateList: [],
				companycateIndex: '',

				tagList: [],
				tagIndex: 0,
				tagListed: [],
				
				isScale: false,
				isCompanyCate: false

			};
		},
		computed: {
			// 城市
			handleProvince() {
				
				if (this.user) {
					if(!this.user.province) return ''
					return `${this.user.province} ${this.user.city} ${this.user.district}`
				} else {
					return ''
				}
			},
			handleScale() {
				return this.scaleList[this.scaleIndex] && this.scaleList[this.scaleIndex].name
			},
			handleCompanycate() {
				return this.company_cateList[this.companycateIndex] && this.company_cateList[this.companycateIndex].name
			},
			handleTag() {
				return this.tagList[this.tagIndex] && this.tagList[this.tagIndex].name
			}
		},
		onLoad() {
			const user = uni.getStorageSync('userInfo')
			this.user = user
			this.isScale = user.scale ? true : false
			this.isCompanyCate = user.job ? true : false
			this.tagListed = user.tag_list

			this.getScale()
			this.getCompanycate()
			this.getTag()
		},
		methods: {
			goSkill() {
				
				uni.navigateTo({
					url:'/pages/user/editCompanyUser/skill?list=' + JSON.stringify(this.tagListed) || []
				})
			},
			async getScale() {
				const {
					data
				} = await this.$http.Company.getScale()
				this.scaleList = data
			},
			async getCompanycate() {
				const {
					data
				} = await this.$http.Recruit.companycate()
				this.company_cateList = data
				this.companycateIndex = data.findIndex(x => x.id == this.user.job)
				console.log(this.companycateIndex)
				
			},
			async getTag() {
				const {
					data
				} = await this.$http.Company.getTag()
				this.tagList = data
			},

			// 城市选择
			bindPickerChange(e) {
				this.area = e.detail
				this.user.province = e.detail.value[0]
				this.user.city = e.detail.value[1]
				this.user.district = e.detail.value[2]
				
				this.user.province_code = e.detail.code[0]
				this.user.city_code = e.detail.code[1]
				this.user.district_code = e.detail.code[2]
			},
			bindChange(e, index, model,isModel) {
				this[index] = e.detail.value
				this.user[model] = this[model + 'List'][this[index]].id
				this[isModel] = true
				
				
			},
			bindChangeTag(e) {
				let index = this.tagListed.findIndex(x => {
					return x.id == this.tagList[e.detail.value].id
				})
				if (index > 0) {
					this.tagListed.splice(index, 1)
				} else {
					this.tagListed.push(this.tagList[e.detail.value])
				}

			},
			// 提交保存
			async save() {
				if(!this.user.header) {
					return uni.showToast({
						title:"请上传企业头像",
						icon: 'none'
					})
				}
				if(!this.user.company) {
					return uni.showToast({
						title:"请输入企业名称",
						icon: 'none'
					})
				}
				if(!this.user.province_code) {
					return uni.showToast({
						title:"请选择企业地址",
						icon: 'none'
					})
				}
				if(!this.user.scale && !this.isScale) {
					return uni.showToast({
						title:"请选择企业规模",
						icon: 'none'
					})
				}
				if(!this.user.company_cate && !this.isCompanyCate) {
					return uni.showToast({
						title:"请选择所属行业",
						icon: 'none'
					})
				}
				
				
				let data = {
					company: this.user.company,
					province_code: this.user.province_code || this.area && this.area.code[0],
					city_code: this.user.city_code || this.area && this.area.code[1],
					district_code: this.user.district_code || this.area && this.area.code[2],
					scale: this.user.scale,
					company_cate: this.user.company_cate || this.company_cateList[this.companycateIndex].id,
					tag: this.tagListed.map(x => x.id),
					header: this.user.header
				}
				const {
					code,
					msg
				} = await this.$http.Company.companybase(data)
				return uni.showToast({
					title: code == 200 ? '修改成功' : msg,
					icon: 'none'
				})
			},

			async uploadAvatar() {
				uni.chooseImage({
					count: 1, //最多可选择的张数
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择，和摄像头功能，默认二者都有
					success: async res => {
						const {
							data
						} = await await this.$http.User.uploadAvatar(res.tempFilePaths[0])
						console.log(data.url)
						this.user.header = globalConfig.BASE_URL + data.url

					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.editUser-page {
		ul {
			background: #fff;
			box-shadow: 0px 0px 10px 2px rgba(241, 241, 241, 1);
			border-radius: 8upx;
			margin: 0 32upx;
			margin-top: 10upx;
			margin-bottom: 32upx;

			.avatar {
				display: flex;
				align-items: center;

				.avatar-wrap {
					width: 64upx;
					height: 64upx;
					border-radius: 64upx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 64upx;
					}
				}
			}

			li {
				margin: 0 32upx;
				border-bottom: 1px solid #EEEEEE;
				display: flex;
				align-items: center;
				padding: 32upx 0;


				// &:last-of-type {
				// 	border-bottom: unset;
				// }

				.left {
					flex: 1;
					display: flex;
					flex-direction: column;

					span {
						color: #666E7A;
						font-size: 24upx;
						line-height: 24upx;
						font-weight: 400;
					}

					input,
					p {
						color: #28211F;
						font-size: 24upx;
						line-height: 24upx;
						font-weight: 500;
						margin-top: 20upx;
						min-height: 24upx;
					}

					.tags {
						display: flex;
						flex-wrap: wrap;

						span {
							color: #fff;
							font-size: 24upx;
							font-weight: 400;
							background: #2AABE2;
							padding: 0 10upx;
							height: 44upx;
							line-height: 44upx;
							margin-right: 20upx;
							margin-top: 20upx;
							border-radius: 4upx;
						}
					}
				}

				image {
					width: 36upx;
					height: 36upx;
				}

			}
		}

		.popup {
			position: fixed;
			top: 0%;
			left: 0%;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, .5);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 999;

			.popup-wrap {
				background: #fff;
				width: 570upx;
				height: 412upx;

			}

			.title {
				display: flex;
				align-items: center;
				padding: 0 32upx;
				height: 96upx;
				border-bottom: 1px solid #EEEEEE;

				span {
					flex: 1;
					color: #28211F;
					font-size: 28upx;
					font-weight: 400;
					line-height: 28upx;
				}

				image {
					width: 32upx;
					height: 32upx;
				}
			}

			.mobile-wrap {
				padding: 0 32upx;

				.mobile-input-ph {
					color: #999999;
				}

				.mobile-input {
					padding-top: 32upx;
					padding-bottom: 20upx;
					border-bottom: 1px solid #EEEEEE;
					display: flex;
					align-items: center;

					input {
						color: #333;
						font-size: 24upx;
						font-weight: 400;
						flex: 1;
					}

					button {
						height: 56upx;
						line-height: 56upx;
						background: #2AABE2;
						color: #fff;
						font-size: 24upx;
						font-weight: 500;
						padding: 0 10upx;
					}
				}
			}

			.btns {
				display: flex;
				align-items: flex-end;
				justify-content: flex-end;
				padding-top: 32upx;

				button {
					margin: 0;
					width: 120upx;
					height: 56upx;
					line-height: 56upx;
					background: #fff;
					border: 1px solid #999999;
					color: #999999;
					font-size: 24upx;
					margin-right: 32upx;
					border-radius: 8upx;

					&:last-of-type {
						background: #2AABE2;
						color: #fff;
						border: 1px solid #2AABE2;

						&::after {
							border: 1px solid #2AABE2;
						}
					}
				}
			}
		}
	}
</style>
